<template>
    <div class="SmallNewDetail" id="SmallNewDetail">
        <el-tooltip class="item" effect="dark" :content="CONFIG.user_nick_name" placement="left-start">
            <div class="img">
                <el-image
                    :src="CONFIG.header_url"
                    fit="cover"
                >
                </el-image>    
            </div>
        </el-tooltip>
        <span class="title">{{CONFIG.title}} </span>
        <div class="time">{{CONFIG.create_time | dayFix2}} </div>
    </div>
</template>

<script>
export default {
    name:'SmallNewDetail',
    props:['config'],
    data() {
        return {
            CONFIG: {
                user_nick_name:'',
                header_url:'',
                title:'',
                create_time:'',
            },
        };
    },
    mounted(){

    },
    watch: {
        config(newValue, oldValue) {
            this.CONFIG = this.config
        },
    },
}
</script>

<style lang="less" scoped>
    .SmallNewDetail{
        width: 95%;
        height: 70px;
        border: 1px solid black;
        position: relative;
        margin-top:20px ;
        border-radius:0 1em 1em  0 ;
        box-shadow: 10px 10px 0px rgb(48, 43, 43);
        transform-style: preserve-3d;
        transition: transform 0.4s ease-out;
        cursor: pointer;
        .img{
            width: 40px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
            transition: transform 0.2s linear;
            &:hover{
                transform: scale(1.25,1.25);
            }
            .el-image{
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
        .title{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 150px;
        }
        &:hover{
            transform: rotateX(360deg);
            box-shadow: 10px 10px 0px rgb(45, 194, 240);
        }
    }
    #SmallNewDetail{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>